<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件的使用</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>
</head>

<style>

    .main{

        width: 100%;
        height: 1000px;
        background-color: #8cebff;


    }

    .top{

        width: 100%;
        height: 20%;
        background-color: yellow;

    }

    .content{

        width: 100%;
        height: 70%;
        background-color: #4cae4c;

    }

    .default {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        border-color: #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }

    .success {
        color: #fff;
        background-color: #67c23a;
        border-color: #67c23a;
    }


</style>

<body>

<div id="app"></div>






<script>


    Vue.component("Vbtn", {


        template:`<button class="default" :class="type">

        <slot></slot>
      </button>`,

        props:['type']

    });



    var Vcontent = {

        template: `<div class="content">我是内容区域

          <Vbtn type="success">删除</Vbtn>

</div>`



    }


    var VHeader = {

        template:`
        <div class="top"> 我是头部
         <Vbtn >播放</Vbtn>

        </div>



        `


    }


    var Vmian = {

        template: `<div class="main">

        <VHeader/>
        <Vcontent />


      </div>`,
        components: {

            VHeader,
            Vcontent

        }

    }




    new Vue({

        el:"#app",
        template:`<Vmian />`,
        data:function () {
            return{

            }
        },
        components:{


            Vmian
        }


    })



</script>



</body>
</html>